<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<style>
		*{margin: 0;padding: 0;}
		li{list-style: none;}
		.tab{
			position: relative;
			width: 181px;
			height: 40px;
			margin: 10px auto;
			border-radius: 3px;
			background: #F1F1F9;
		}
		.tab div{
			text-align: center;
			width:60px;
			line-height: 40px;
			color: #9999;
			position: absolute;
			z-index: 9;
		}
		.tab .selsct_B{
			text-align: center;
			width:60px;
			height: 40px;
			line-height: 40px;
			color: #9999;
			background: #F1F1F9;
			position: absolute;
			z-index: 8;
		}
		.tab .item1{
			left: 0px;
		}
		.tab .item2{
			left: 60px;
		}
		.tab .item3 {
			left: 120px;
		}
		.tab .item.active{
			color: #fff;
		}
		.tab .selsct_B{
			left: 0;
			background: #0066B9;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="tab">
		<div class="item item1 active">1</div>
		<div class="item item2">2</div>
		<div class="item item3">3</div>
		<i class="selsct_B"></i>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
	<script>
		var $tab = $('.tab');
		var $item = $tab.find('.item');
		$item.on("click",function(){
			$('.selsct_B').animate({left:$(this).css('left')},'fast');
			$(this).addClass('active').siblings().removeClass('active');
		})
	</script>
</body>
</html>